<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise_链式调用</title>
</head>

<body>
  <script>
    /**
     * 目标：掌握Promise的链式调用
     * 需求：把省市的嵌套结构，改成链式调用的线性结构
    */


    let p = new Promise(function (reslove, reject) {
      reslove(1)   //返回成功的结果
      console.log(1);
      // 执行器中的代码是同步代码   直接看执行顺序
    })
    console.log(22);

    // f1回调函数  获取p的实例结果
    let p2 = p.then(function f1(res) {
      // 没有返回值 就是undefined   有return 就返回给下一个是return的值
      // console.log(res);  //由于返回的是成功的1  能够打印1
      // 1.  如果 f 返回的是一个非promise的值  p2  的结果就是f1函数的fanhuizhi
      // return 10

      // 2.如果 f1  函数内部报错  那么p2 的状态是失败状态就catch一些
      // console.log(a);
      // 3.返回axios  就会直接返回一个成功状态的promise
      // return axios({
      //   url: 'http://hmajax.itheima.net/api/province'
      // })
      // 不写retrun 就会返回undefined
      axios({
        url: 'http://hmajax.itheima.net/api/province'
      })
    })

    // .then函数 的返回值是一个新的Promise
    // f2回调函数  获取 p2实例结果
    p2.then(function f2(res2) {
      console.log(res2);   //undefined
    }).catch(function f3(err) {
      console.log(err);
      //此时上一个返回的新promise 这边,then 失败就会catch
    })

    console.dir(p);
    console.dir(p2);


  </script>
</body>

</html>